<template>
  <!-- 热度文章 -->
  <div class="item">
    <router-link
      class="link"
      :to="{
        name: 'article',
        params: {
          id: info.id,
        },
      }"
    >
      <figure class="inner">
        <span class="views">{{ info.temperature | toThousands }} ℃</span>
        <a-spin tip="Loading..." :spinning="spinning">
          <img
            class="image ls-is-cached lazyloaded"
            :src="'https://api.yimian.xyz/img?type=imgbed&id=' + info.id"
            :alt="info.title"
            @load="spinning = false"
          />
        </a-spin>
        <figcaption class="title">{{ info.title }}</figcaption>
      </figure>
    </router-link>
  </div>
</template>

<script>
export default {
  props: ["info"],
  data() {
    return {
      //   是否加载中
      spinning: true,
    };
  },
};
</script>

<style scoped>
.item {
  overflow: hidden;
}
.item .link {
  display: block;
}
.item .link .inner {
  position: relative;
}
.item .link .inner .views {
  display: flex;
  align-items: center;
  position: absolute;
  z-index: 1;
  top: 5px;
  right: 5px;
  background-image: linear-gradient(to right, #fc712a, #f84c39);
  background-color: #f84c39;
  color: #fff;
  font-size: 12px;
  height: 18px;
  padding: 0 8px;
  border-radius: 2px;
  white-space: nowrap;
}
.item .link .inner .image {
  width: 100%;
  height: 120px;
  -o-object-fit: cover;
  object-fit: cover;
  transition: opacity 0.35s;
  border-radius: 4px 4px 0 0;
}
.item .link .inner .title {
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
  padding: 0 8px;
  line-height: 32px;
  color: #909399;
  background: #f2f6fc;
  transition: background 0.35s;
  border-radius: 0 0 4px;
}
</style>
